<!-- 课程作业 -->
<template>
  <div class="task" v-for="(item, index) in tabList" :key="index">
    <div class="task-item">
      <span class="task-type" :style="{ color: typeTitle(item.type).colorStr }"
        >[{{ typeTitle(item.type).title }}]</span
      >
      <span class="task-title">{{ item.content }}</span>
    </div>
    <div class="task-list">
      <div v-if="item.type == 1">
        <el-radio-group v-model="item.answer">
          <el-radio
            :value="item1"
            v-for="(item1, index1) in item.options"
            :key="index1"
          >
            {{ item1 }}
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="item.type == 2">
        <el-checkbox-group v-model="item.answer">
          <el-checkbox
            :label="item1"
            :value="item1"
            v-for="(item1, index1) in item.options"
            :key="index1"
          />
        </el-checkbox-group>
      </div>
      <div v-if="item.type == 3">
        <el-input
          v-model="item.answer"
          style="width: 100%; height: 100%"
          :rows="2"
          type="textarea"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, defineExpose } from "vue";

const props = defineProps({
  questions: {
    type: Array,
    default: () => [],
  },
});

const tabList = ref(props.questions);
function typeTitle(index) {
  switch (index) {
    case "1":
      return {
        title: "单选题",
        colorStr: "#FFC125",
      };
      break;
    case "2":
      return {
        title: "多选题",
        colorStr: "#FFC125",
      };
      break;
    case "3":
      return {
        title: "判断题",
        colorStr: "#00BFFF",
      };
      break;
  }
}

defineExpose({ tabList });
</script>

<style lang="less" scoped>
.el-radio-group,
.el-checkbox-group {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.task {
  padding: 20px;
  border-bottom: 1px solid #cfcfcf;
  .task-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    .task-type {
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #333;
      margin-right: 10px;
    }
    .task-title {
      flex: 1;
      color: #333;
    }
  }
  .task-list {
    padding-left: 80px;
  }
}
</style>
